<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .info_box {
            height: 223px;
            box-sizing: border-box;
            background-color: #e62442;
            margin-bottom: 6px;
            padding-top: 65px;
        }
        .info_box .notice {
            width: 20px;
            padding: 13px 18px;
            position: absolute;
            right: 0;
            top: 25px;
        }
        .info_box .info .info_img {
            width: 61px;
            height: 61px;
            border: 1px solid #fe9cab;
            border-radius: 50%;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
            margin: auto;
        }
        .info_box .info .info_img .img_box {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            overflow: hidden;
        }
        .info_box .info .info_img .img_box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .info_box .info .info_name {
            font-size: 16px;
            color: #fff;
            text-align: center;
            margin-top: 7px;
            margin-bottom: 46px;
        }
        .main ul li .li_box {
            height: 50px;
            line-height: 50px;
            display: -webkit-box;
            display: -webkit-flex;
            align-items: center;
            background-color: #fff;
            border-bottom: 1px solid #e8e8e8;
            padding: 0 15px;
        }
        .main ul li:last-child .li_box {
            border-bottom: none;
        }
        .main ul li .li_box .li_boxl {
            width: 20px;
        }
        .main ul li .li_box .li_boxl img {
            width: 15px;
            display: block;
        }
        .main ul li .li_box .li_boxc {
            color: #333;
            font-size: 15px;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-right: 5px;
        }
        .main ul li .li_box .li_boxr {
            height: 50px;
            display: -webkit-box;
            -webkit-box-align: center;
        }
        .main ul li .li_box .li_boxr img {
            height: 12px;
            display: block;
        }
        .main ul li .li_box .li_boxr input {
            display: none;
        }
        .main ul li .li_box .li_boxr .check_icon {
            height: 22px;
        }
    </style>
</head>
<body>
    <div class="info_box">
            <img class="notice" tapmode onclick="fnNotice();" src="../image/seller_notice.png">
        <div class="info">
            <div class="info_img">
                <div class="img_box">
                    <img class="user_head" src="../image/default.png">
                </div>
            </div>
            <div class="info_name user_name">加载中</div>
        </div>
    </div>
    <div class="main">
        <ul>
            <li tapmode onclick="fnSellerData();">
                <div class="li_box">
                    <div class="li_boxl">
                        <img src="../image/my_icon4.png">
                    </div>
                    <div class="li_boxc">店铺信息</div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
            <li>
                <div class="li_box">
                    <div class="li_boxl">
                        <img src="../image/seller_my_icon1.png">
                    </div>
                    <div class="li_boxc">当前状态：<span class="shop_business">营业中</span></div>
                    <div class="li_boxr" tapmode onclick="fnState();">
                        <input type="checkbox" name="state">
                        <img class="check_icon" src="../image/check_off.png">
                    </div>
                </div>
            </li>
            <li tapmode onclick="fnActivityManage();">
                <div class="li_box">
                    <div class="li_boxl">
                        <img src="../image/seller_my_icon2.png">
                    </div>
                    <div class="li_boxc">活动管理</div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
            <li tapmode onclick="fnSet();">
                <div class="li_box">
                    <div class="li_boxl">
                        <img src="../image/my_icon5.png">
                    </div>
                    <div class="li_boxc">设置</div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){
        shop = $api.getStorage('shop_data');
        fnGetUser();

        //监听登录和退出登录
        api.addEventListener({
            name: 'loginEvent'
        }, function(ret, err) {
            if (ret) {
                fnGetUser();
            } 
        });


        //监听用户信息变化
        api.addEventListener({
            name: 'userChangeEvent'
        }, function(ret, err) {
            if (ret) {
                fnGetUser();
            }
        });

        //退出登录
        api.addEventListener({
            name: 'logoutEvent'
        }, function(ret, err) {
            if (ret) {
                api.closeFrame();
            }
        });
    };

    // 消息
    function fnNotice() {
        api.openWin({
            name: 'message',
            url: './message.html'
        });
    }

    // 店铺信息
    function fnSellerData() {
        api.openWin({
            name: 'seller_data',
            url: './seller_data.html'
        });
    }

    // 活动管理
    function fnActivityManage() {
        api.openWin({
            name: 'activity_manage',
            url: './activity_manage.html'
        });
    }

    // 设置
    function fnSet() {
        api.openWin({
            name: 'set',
            url: './set.html'
        });
    }

    // 当前状态
    function fnState() {
        if ($('input[name=state]').is(':checked')) {
            $('input[name=state]').prop('checked', false);
            $('.check_icon').attr('src', '../image/check_off.png');
            shop_business = 2;
            $('.shop_business').text('休息中');
        } else {
            $('input[name=state]').prop('checked', true);
            $('.check_icon').attr('src', '../image/check_on.png');
            shop_business = 1;
            $('.shop_business').text('营业中');
        }

        api.ajax({
            url: rootPath + '/api/seller/change_shop_status',
            method: 'post',
            data: {
                values: { 
                    shop_id : shop.id,
                    token : shop.token,
                    shop_business : shop_business
                },

            }
        }, function(ret, err) {
            if (ret) {
                
            } else {
                alert(JSON.stringify(err.msg));
            }
        });
    }

    function fnChangeState(status) {
        if (status == 2) {
            $('input[name=state]').prop('checked', false);
            $('.check_icon').attr('src', '../image/check_off.png');
            $('.shop_business').text('休息中');
        } else if(status == 1) {
            $('input[name=state]').prop('checked', true);
            $('.check_icon').attr('src', '../image/check_on.png');
            $('.shop_business').text('营业中');
        }
    }

    function fnGetUser() {
        shop = $api.getStorage('shop_data');
        api.ajax({
            url: rootPath+'/api/seller/get_seller_info',
            method: 'get',
            data: {
                values: { 
                    shop_id: shop.id,
                    token:shop.token,
                    id : shop.id
                },
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status == 200) {
                    var head_img = formatHeadImg(ret.data.img);
                    $('.user_head').attr('src',head_img);
                    $('.user_name').text(ret.data.name);
                    fnChangeState(ret.data.shop_business);
                    shop_business = ret.data.shop_business;
                }
            } else {
                
            }
        });
    }


</script>
</html>